<template>
	<el-card shadow="never" class="aui-card--fill">
		<div class="mod-home">
			<el-row>
				<el-col :span="24">
					<div class="home-header">{{ stationName }}</div>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="16">
					<div class="home-tuli">
						<div class="homeTuTxt">图例</div>
						<div class="homeTuSt">
							<span class="homeTuSt1">有效状态</span>
							<span class="homeTuSt2">无动作</span>
						</div>
						<div class="homeTuStList" style="width: 85%;margin-left: 0.5vw;">
							<ul style="width: 100%;">
								<li class="homeTuStListLi" v-for="item in homeTuStListAll">
									<img :src="item.imgUrl" />
									<span>{{ item.name }}</span>
								</li>
							</ul>
						</div>
					</div>
				</el-col>
				<el-col :span="8">
					<div class="home-tuli home-tuli1">
						<div class="homeTuTxt homeTuTxt1">电源故障</div>
						<div class="homeDY">
							<ul>
								<li v-for="(item, index) in homeDianList" :class="activeIndex == index ? 'active' : ''">
									<span>{{ item.name }}</span>
								</li>
							</ul>
						</div>
					</div>
				</el-col>
			</el-row>

			<el-row>
				<el-col :span="24">
					<div class="homeSH">
						<h3 class="homeSHTxt">上行 ({{ upStatus }})</h3>
						<div class="homeSH1">
							<div class="homeSH2"
								:style="doorList.length < 17 ? { width: 100 / (doorList.length) + '%' } : { width: 100 / avaNum + '%' }"
								v-for="(item, index) in doorList"
								:class="[index >= avaNum && doorList.length >= 17 ? 'door1' : '', item.dcu == 0 ? 'opcity1' : '']"
								@mouseenter="doorHover(item)" @mouseleave="doorLeave(item)" @click="doorInfo(item, 0)">
								<span>{{ item.dcu }}</span>
								<el-badge
									:value="item.statusG == 1 ? item.statusGNum : item.status == 1 && item.statusNum !== 0 ? item.statusNum : ''"
									:class="item.statusG == 1 ? 'item' : item.status == 1 && item.statusG == 0 ? 'item1' : ''">
									<div v-if="item.statusZ == 0">
										<img src="../../assets/img/kaimendaowei.png" />
									</div>
									<div v-if="item.statusZ == 1">
										<img src="../../assets/img/guanbidaowei.png" />
									</div>
									<div v-if="item.statusZ == 2">
										<img src="../../assets/img/guanbisuojin.png" />
									</div>
									<div v-if="item.statusZ == 3">
										<img src="../../assets/img/shoudong.png" />
									</div>
									<div v-if="item.statusZ == 4">
										<img src="../../assets/img/LCB.png" />
									</div>
									<div v-if="item.statusZ == 5">
										<img src="../../assets/img/guanmenguocheng.png" />
									</div>
									<div v-if="item.statusZ == 6">
										<img src="../../assets/img/kaimenguocheng.png" />
									</div>
									<div v-if="item.statusZ == 7">
										<img src="../../assets/img/kmyz.png" />
									</div>
									<div v-if="item.statusZ == 8">
										<img src="../../assets/img/gmyz.png" />
									</div>
									<div v-if="item.statusZ == 0">
										<img :src="item.url" />
									</div>
									<div v-if="item.doorType == 0 && !item.statusZ">
										<img src="../../assets/img/duanmen.png" />
									</div>
									<div v-if="item.doorType == 1 && !item.statusZ">
										<img src="../../assets/img/guanbidaowei.png" />
									</div>
									<div v-if="item.doorType == 2 && !item.statusZ">
										<img src="../../assets/img/yjm.png" />
									</div>
								</el-badge>
							</div>
						</div>
					</div>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="24">
					<div class="homeSH homeSHM">
						<div class="homeTuTxt">上行命令</div>
						<div class="homeTuStList">
							<div class="homeTuStList1">
								<p class="homeTuStList11">IBP命令</p>
								<el-popover popper-class="homePoper" placement="top-start" width="200" trigger="hover"
									:visible-arrow="false" content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">
									<img slot="reference" class="homewarn" src="../../assets/img/warn.png" />
								</el-popover>
								<div class="homeTuStList12">
									<div class="homeTuStList13"
										:class="[IBPActive == index ? 'IBPactive' : '', pslNum == 3 ? 'PSLNew2' : '']"
										v-for="(item, index) in IBPList" @click="IBPClick(index)">
										{{ item.name }}
									</div>
								</div>
							</div>
							<div class="homeTuStList2 " :class="pslNum == 3 ? 'PSLW' : ''" v-for="(item, val) in pslNum">
								<p class="homeTuStList11">PSL{{ item }}命令</p>
								<div class="homeTuStList12" :class="pslNum == 3 ? 'PSL12' : ''">
									<button class="homeTuStList13 PSLBtn" :disabled="IBPActive !== -1"
										:class="[PSLActive == index ? 'IBPactive' : '', pslNum == 3 ? 'PSLNew' : '']"
										v-for="(item, index) in PSLList" @click="PSLClick(index)">
										{{ item.name }}
									</button>
									<!-- <div class="homeTuStList13" :disabled="IBPActive!==-1" :class="index==0?'IBPactive':''"
										v-for="(item,index) in PSLList"  @click="PSLClick(index)">
										
									</div> -->
								</div>
							</div>
							<!-- <div class="homeTuStList2">
								<p class="homeTuStList11">PSL2命令</p>
								<div class="homeTuStList12">
									<div class="homeTuStList13" :class="index==0?'IBPactive':''"
										v-for="(item,index) in PSLList">
										{{item.name}}
									</div>
								</div>
							</div> -->
							<div class="homeTuStList1 homeTuStList3" :class="pslNum == 3 ? 'SIGWidth' : ''">
								<p class="homeTuStList11">SIG命令</p>
								<div class="homeTuStList12" :class="pslNum == 3 ? 'PSL12' : ''">
									<button class="homeTuStList13 PSLBtn" :disabled="IBPActive !== -1"
										:class="[SIGActive == index ? 'IBPactive' : '', pslNum == 3 ? 'PSLNew1' : '']"
										v-for="(item, index) in SIGList" @click="SIGClick(index)">
										{{ item.name }}
									</button>
									<!-- <div class="homeTuStList13" v-for="item in SIGList">
										{{item.name}}
									</div> -->
								</div>
							</div>
							<div class="homeTuStList2" :class="pslNum == 3 ? 'PSCWidth' : 'PSCWidth1'">
								<p class="homeTuStList11">PSC信息</p>
								<div class="homeTuStList12" :class="pslNum == 3 ? 'PSL12' : ''">
									<button class="homeTuStList13 PSLBtn" :disabled="IBPActive !== -1"
										:class="[PSCActive == index ? 'IBPactive' : '', pslNum == 3 ? 'PSLNew3' : '']"
										v-for="(item, index) in PSCList" @click="PSCClick(index)">
										{{ item.name }}
									</button>
									<!-- <div class="homeTuStList13" :class="index==0||index==5?'IBPactive':''"
										v-for="(item,index) in PSCList">
										{{item.name}}
									</div> -->
								</div>
							</div>
						</div>
					</div>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="24">
					<div class="homeSH">
						<h3 class="homeSHTxt">下行 ({{ downStatus }})</h3>
						<div class="homeSH1">
							<div class="homeSH2"
								:style="doorListDown.length < 17 ? { width: 100 / (doorListDown.length) + '%' } : { width: 100 / avaNumD + '%' }"
								v-for="(item, index) in doorListDown"
								:class="[index >= avaNumD && doorListDown.length >= 17 ? 'door1' : '', item.dcu == 0 ? 'opcity1' : '']"
								@mouseenter="doorHover(item, 1)" @mouseleave="doorLeave(item, 1)">
								<span>{{ item.dcu }}</span>
								<el-badge
									:value="item.statusG == 1 ? item.statusGNum : item.status == 1 ? item.statusNum : ''"
									:class="item.statusG == 1 ? 'item' : item.status == 1 && item.statusG == 0 ? 'item1' : ''">
									<div v-if="item.statusZ == 1">
										<img src="../../assets/img/kaimendaowei.png" />
									</div>
									<div v-if="item.statusZ == 2">
										<img src="../../assets/img/guanbidaowei.png" />
									</div>
									<div v-if="item.statusZ == 3">
										<img src="../../assets/img/guanbisuojin.png" />
									</div>
									<div v-if="item.statusZ == 4">
										<img src="../../assets/img/shoudong.png" />
									</div>
									<div v-if="item.statusZ == 5">
										<img src="../../assets/img/LCB.png" />
									</div>
									<div v-if="item.statusZ == 6">
										<img src="../../assets/img/guanmenguocheng.png" />
									</div>
									<div v-if="item.statusZ == 7">
										<img src="../../assets/img/kaimenguocheng.png" />
									</div>
									<div v-if="item.statusZ == 8">
										<img src="../../assets/img/kmyz.png" />
									</div>
									<div v-if="item.statusZ == 9">
										<img src="../../assets/img/gmyz.png" />
									</div>
									<div v-if="item.statusZ == 0">
										<img :src="item.url" />
									</div>
									<div v-if="item.doorType == 0">
										<img src="../../assets/img/duanmen.png" />
									</div>
									<div v-if="item.doorType == 1">
										<img src="../../assets/img/guanbidaowei.png" />
									</div>
									<div v-if="item.doorType == 2">
										<img src="../../assets/img/yjm.png" />
									</div>
								</el-badge>
							</div>
						</div>
					</div>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="24">
					<div class="homeSH homeSHM">
						<div class="homeTuTxt">下行命令</div>
						<div class="homeTuStList">
							<div class="homeTuStList1">
								<p class="homeTuStList11">IBP命令</p>
								<el-popover popper-class="homePoper" placement="top-start" width="200" trigger="hover"
									:visible-arrow="false" content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">
									<img slot="reference" class="homewarn" src="../../assets/img/warn.png" />
								</el-popover>
								<div class="homeTuStList12">
									<div class="homeTuStList13" v-for="item in IBPList1"
										:class="[pslNum == 3 ? 'PSLNew2' : '']">
										{{ item.name }}
									</div>
								</div>
							</div>
							<div class="homeTuStList2" :class="pslNum == 3 ? 'PSLW' : ''" v-for="item in pslNum">
								<p class="homeTuStList11">PSL{{ item }}命令</p>
								<div class="homeTuStList12" :class="pslNum == 3 ? 'PSL12' : ''">
									<div class="homeTuStList13" v-for="item in PSLList"
										:class="[pslNum == 3 ? 'PSLNew' : '']">
										{{ item.name }}
									</div>
								</div>
							</div>
							<!-- <div class="homeTuStList2">
								<p class="homeTuStList11">PSL2命令</p>
								<div class="homeTuStList12">
									<div class="homeTuStList13" v-for="item in PSLList">
										{{item.name}}
									</div>
								</div>
							</div> -->
							<div class="homeTuStList1 homeTuStList3" :class="pslNum == 3 ? 'SIGWidth' : ''">
								<p class="homeTuStList11">SIG命令</p>
								<div class="homeTuStList12" :class="pslNum == 3 ? 'PSL12' : ''">
									<div class="homeTuStList13" v-for="item in SIGList"
										:class="[pslNum == 3 ? 'PSLNew1' : '']">
										{{ item.name }}
									</div>
								</div>
							</div>
							<div class="homeTuStList2" :class="pslNum == 3 ? 'PSCWidth' : 'PSCWidth1'">
								<p class="homeTuStList11">PSC信息</p>
								<div class="homeTuStList12" :class="pslNum == 3 ? 'PSL12' : ''">
									<div class="homeTuStList13" v-for="item in PSCList"
										:class="[pslNum == 3 ? 'PSLNew3' : '']">
										{{ item.name }}
									</div>
								</div>
							</div>
						</div>
					</div>
				</el-col>
			</el-row>
		</div>
		<div class="doorBaseInfo" v-if="doorStatus">
			<div class="doorBaseInfoH">
				<div><span class="doorBaseInfoH1">DCU编号：</span><span class="doorBaseInfoH2">{{ doorNum }}</span></div>
				<div><span>站台侧：</span><span>{{ doorDe }}</span></div>
			</div>
			<div class="doorBaseInfoC">
				<div class="doorBaseInfolf" v-if="Tstatus">
					<div v-for="item in doorBaseInfoC1"
						:class="item.status == 2 ? 'doorBaseInfoNB' : item.status == 1 ? 'doorBaseInfoNA' : ''"
						class="doorBaseInfoN1">
						{{ item.name }}</div>
					<!-- <div v-for="item in homeTuStListAll" 
							class="doorBaseInfoN1">{{item.name}}</div> -->
				</div>
				<div class="doorBaseInfoRg" v-if="Gstatus">
					<div v-for="item in doorBaseInfoC2" :class="item.status == 1 ? 'doorBaseInfoNA' : ''"
						class="doorBaseInfoN1">
						{{ item.name }}</div>
				</div>
			</div>
		</div>
	</el-card>
</template>
<script>
import Cookies from 'js-cookie'
export default {
	data() {
		return {
			lineName: '', //线路的名字
			stationN: '', //站点的名字
			stationName: '',
			upStatus: '', //上行全高还是半高
			downStatus: '', //下行全高还是半高
			pslNum: Number(Cookies.get('pslNum')),
			homeTuStListAll: [{
				imgUrl: require('@/assets/img/kaimendaowei.png'),
				name: '开门到位',
				status: 0,
			},
			{
				imgUrl: require('@/assets/img/guanbidaowei.png'),
				name: '关门到位',
				status: 1,
			},
			{
				imgUrl: require('@/assets/img/guanbisuojin.png'),
				name: '关闭锁紧',
				status: 2,
			},
			{
				imgUrl: require('@/assets/img/shoudong.png'),
				name: '手动锁紧',
				status: 3,
			},
			{
				imgUrl: require('@/assets/img/LCB.png'),
				name: 'LCB隔离',
				status: 4,
			},
			{
				imgUrl: require('@/assets/img/guanmenguocheng.png'),
				name: '关门中',
				status: 5,
			},
			{
				imgUrl: require('@/assets/img/kaimenguocheng.png'),
				name: '开门中',
				status: 6,
			},
			{
				imgUrl: require('@/assets/img/kmyz.png'),
				name: '开门遇阻',
				status: 7,
			},
			{
				imgUrl: require('@/assets/img/gmyz.png'),
				name: '关门遇阻',
				status: 8,
			},
			],
			homeDianList: [{
				name: '驱动电源'
			},
			{
				name: 'UPS'
			},
			{
				name: '主电源'
			},
			{
				name: '控制电源'
			},
			{
				name: "电池"
			},

			],
			activeIndex: 0,
			Tstatus: false, //状态显示
			Gstatus: false, //故障显示
			doorStatus: false, //显示弹窗
			doorList: [], //上行
			doorListDown: [], //下行
			avaNum: '', //数组的平均值
			avaNumD: '', //下行的数组的平均值
			IBPList: [{
				name: 'IBP有效'
			}, {
				name: "IBP关门"
			}, {
				name: 'IBP 6B开门'
			}, {
				name: 'IBP 8B开门'
			}, {
				name: "IBP排烟门开门"
			}],
			IBPActive: -1,
			IBPList1: [{
				name: 'IBP有效'
			}, {
				name: 'IBP 6B开门'
			}, {
				name: 'IBP 8B开门'
			}, {
				name: "IBP排烟门开门"
			}],
			PSLList: [{
				name: 'PSL 6B有效'
			},
			{
				name: 'PSL 6B开门'
			},
			{
				name: 'PSL 8A有效'
			},
			{
				name: 'PSL 8A开门'
			},
			{
				name: '互锁解除'
			},
			{
				name: 'PSL关门'
			}
			],
			PSLActive: -1,
			PSCList: [{
				name: '6B开门命令'
			},
			{
				name: '关门命令'
			}, {
				name: '8B开门命令'
			}, {
				name: "安全回路"
			}, {
				name: 'PEDC通讯'
			}, {
				name: '继电器'
			}
			],
			PSCActive: -1,

			SIGList: [{
				name: 'SIG 6B开门'
			},
			{
				name: 'SIG 8B开门'
			},
			{
				name: 'SIG关门'
			}
			],
			SIGActive: -1,
			doorNum: '',
			doorDe: '',
			doorBaseInfoC1: [],
			doorBaseInfoC2: [{
				status: 1,
				name: '自学习完成'
			},
			{
				status: 0,
				name: '关闭故障'
			},
			{
				status: 1,
				name: '安全回路路障'
			},
			{
				status: 1,
				name: '开门故障'
			},
			{
				status: 1,
				name: '手动解锁故障'
			},
			],
		}
	},
	mounted() {
		this.init()
	},
	methods: {
		//接收websocket数据
		handleMsg() {
			// this.$globalWebSocket.ws.onmessage = this.getMessage
			this.getMessage()
		},
		//获取websocket数据
		getMessage(e) {
			const v1 = '0101010101010101010101010101010101010101010101010101010101010101'
			const v2 = '0101010101010101010101010101010101010101010101010101010101010101'
			const v3 = '0101010101010101010101010101010101010101010101010101010101010101'
			const v4 = '1100010101010101010101010101010101010101010101010101010101010101'
			const v5 = '0101010101010101010101010101010101010101010101010101010101010101'
			const v6 = '0101010101010101010101010101010101010101010101010101010101010101'
			const v7 = '1101010101010101010101010101010101010101010101010101010101010101'
			const v8 = '1101010101010101010101010101010101010101010101010101010101010101'
			const v9 = '1101010101010101010101010101010101010101010101010101010101010101'
			var vZ = [v1.split(''), v2.split(''), v3.split(''), v4.split(''), v5.split(''), v6.split(''), v7.split(''), v8.split(''), v9.split('')];
			// 数组的内容对象状态的优先级,状态的数量，拼成额日为数组
			var key = [1, 2, 3, 9, 8, 4, 5, 6, 7]
			const fanimalArr = [[]]
			for (var j = 0; j < 41; j++) {
				fanimalArr[j] = []
				var num = 1
				for (var i = 0; i < key.length; i++) {
					if (vZ[i][j] == 1) {
						var obj = {
							statusZ: i,
							key: key[i],
							statusNum: num++,
						}
						fanimalArr[j].push(obj)
					}
				}
			}
			let doorListHD = [] //滑动门的数组
			this.doorList.forEach(item => {
				if (item.doorType == 1) {
					doorListHD.push(item)
				}
			})
			//重组doorList
			doorListHD.forEach((item, index) => {
				doorListHD[index].statusNum = fanimalArr[index].length
				doorListHD[index].status = 1
				doorListHD[index].statusG = 0
				doorListHD[index].statusList = fanimalArr[index]
				if (fanimalArr[index].length !== 0) {
					var max = fanimalArr[index][0].key
					fanimalArr[index].forEach((val, num) => {
						if (fanimalArr[index][num].key > max) {
							max = fanimalArr[index][num].key
							const mMax = fanimalArr[index][num].statusZ; //记录最大值的index的下标
							doorListHD[index].statusZ = mMax
						} else if (num == 0) {
							doorListHD[index].statusZ = fanimalArr[index][0].statusZ
						}
					})
				}
			})
		},
		init() {
			//获取线路和站点
			var p0 = new Promise((resolve, reject) => {
				this.getLineInfo(() => {
					resolve()
				})
			})
			var p1 = new Promise((resolve, reject) => {
				this.getStationInfo(() => {
					resolve()
				})
			})
			var p2 = new Promise((resolve, reject) => {
				this.getdoorList(() => {
					resolve()
				})
			})
			Promise.all([p0, p1, p2]).then(() => {
				this.stationName = this.lineName + this.stationN;
				this.handleMsg();
			})
		},
		//获取线路的信息
		getLineInfo(callback) {
			this.$http.get(`/psc/line/${Cookies.get('lineId')}`).then(res => {
				this.lineName = res.data.data.lineName
				callback()
			})
		},
		//获取站点的信息
		getStationInfo(callback) {
			this.$http.get(`/psc/station/${Cookies.get('stationId')}`).then(res => {
				this.stationN = res.data.data.stationName
				callback()
			})
		},
		// 获取门的信息
		getdoorList(callback) {
			this.$http.get('/psc/door/getDoor').then(res => {
				this.doorList = res.data.data.up
				this.doorListDown = res.data.data.down
				if (this.doorList[0].type == 0 && this.doorList[0].stationSide == 1) {
					this.upStatus = '全高'
				} else if (this.doorList[0].type == 1 && this.doorList[0].stationSide == 1) {
					this.upStatus = '半高'
				}
				if (this.doorListDown[0].type == 0 && this.doorListDown[0].stationSide == 0) {
					this.downStatus = '全高'
				} else if (this.doorListDown[0].type == 1 && this.doorListDown[0].stationSide == 0) {
					this.downStatus = '半高'
				}
				var num = this.doorList.length
				var numD = this.doorListDown.length
				// 判断上行门的奇数还有偶数
				if (num % 2 == 0) {
					this.avaNum = num / 2
				} else {
					// 如果门的数量是基数
					var obj = {
						dcu: '0',
						doorType: -1,
					}
					var numNew = num + 1
					this.avaNum = numNew / 2
					this.doorList.splice(this.avaNum, 0, obj)
				}
				// 判断下行门的奇数还有偶数
				if (numD % 2 == 0) {
					this.avaNumD = numD / 2
				} else {
					// 如果门的数量是基数
					var obj = {
						dcu: '0',
						doorType: -1,
					}
					var numNew = num + 1
					this.avaNumD = numNew / 2
					this.doorListDown.splice(this.avaNumD, 0, obj)
				}
				callback()
			})
		},
		// 门滑动的效果
		doorHover(item, number) {
			if (item.dcu !== '0') {
				this.doorStatus = true
				this.$nextTick(() => {
					this.doorNum = item.dcu
					if (item.statusG == 1) {
						//故障码显示
						this.Gstatus = true
						this.Tstatus = false
					} else {
						this.doorBaseInfoC1 = []
						this.Tstatus = true
						this.Gstatus = false
						this.homeTuStListAll.forEach(val => {
							var obj = {
								name: val.name,
								key: val.status,
								status: 0
							}
							this.doorBaseInfoC1.push(obj)
						})
						if (item.statusList && item.statusList.length !== 0) {
							item.statusList.forEach(item => {
								this.doorBaseInfoC1.forEach((val, index) => {
									if (item.statusZ == val.key) {
										this.doorBaseInfoC1[index].status = 1
									}
								})
							})
						}
					}
					if (number == 1) {
						this.doorDe = '下行'
					} else {
						this.doorDe = '上行'
					}

				})
			}
		},
		//门离开的效果
		doorLeave(item, number) {
			this.doorStatus = false
			this.$nextTick(() => {
				this.doorNum = ''
				this.doorDe = ''
			})
		},
		//点击单门的信息
		doorInfo(item, number) {
			this.$router.push({
				path: '/doorInfo/index',
				query: {
					item: item,
					num: number
				}
			})
		},
		//IBP命令的点击
		IBPClick(index) {
			if (this.IBPActive !== index) {
				this.IBPActive = index
			} else {
				this.IBPActive = -1
			}
		},
		//PSL命令点击
		PSLClick(index) {
			if (this.PSLActive !== index) {
				this.PSLActive = index
			} else {
				this.PSLActive = -1
			}
		},
		//SIG命令点击
		SIGClick(index) {
			if (this.SIGActive !== index) {
				this.SIGActive = index
			} else {
				this.SIGActive = -1
			}
		},
		//PSC信息的点击
		PSCClick(index) {
			if (this.PSCActive !== index) {
				this.PSCActive = index
			} else {
				this.PSCActive = -1
			}
		}
	}
}
</script>

<style scoped>
.mod-home {
	line-height: 1.5;
}

.home-header {
	height: 5.5vh;
	line-height: 5.5vh;
	background-color: #fff;
	text-align: center;
	font-size: 37px;
	font-weight: 900;
	letter-spacing: 9px;
	color: rgba(42, 130, 228, 1);
	border-radius: 10px;
	margin-bottom: 10px;
}

.home-tuli {
	height: 7.6vh;
	padding: 0 16px;
	background-color: #fff;
	border-radius: 10px;
	margin-right: 10px;
	display: flex;
	align-items: center;
}

.home-tuli1 {
	margin-right: 0 !important;
}

.homeTuTxt {
	width: 16px;
	font-size: 16px;
	font-weight: 700;
	word-wrap: break-word;
	word-break: normal;
	color: rgba(42, 130, 228, 1);
}

.homeTuSt {
	display: flex;
	flex-direction: column;
	margin-left: 1.5vw;
}

.homeTuSt1,
.homeTuSt2 {
	color: #fff;
	padding: 2px 16px;
	background: rgba(67, 207, 124, 1);
	border-radius: 5px;
	font-size: 14px;
	text-align: center;
	width: 80px;
	display: block;
}

.homeTuSt2 {
	background: rgba(128, 128, 128, 1);
	margin-top: 5px;
}

.homeTuStList,
.homeDY {
	margin-left: 1.5vw;
}

.homeTuStList ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	justify-content: space-evenly;
}

.homeTuStList ul li {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	/* margin-right: 28px; */
}

.homeTuStListLi {
	/* width: 32px; */
	height: 100%;
}

.homeTuStListLi img {
	width: 26px;
}

.homeTuStListLi span {
	margin-top: 4px;
	font-size: 14px;
}

.homeTuTxt1 {
	font-size: 14px;
	line-height: 16px;
}

.homeDY {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
}

.homeDY ul {
	width: 100%;
	height: 100%;
	list-style: none;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	padding: 0;
	margin: 0;
}

.homeDY ul li {
	/* width: 33%; */
	background: rgba(166, 166, 166, 1);
	padding: 3px 15px;
	font-size: 14px;
	color: #fff;
	border-radius: 5px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 10px;
}

.active {
	background: rgba(212, 48, 48, 1) !important;
}

.homeSH {
	width: 100%;
	height: 16.6vh;
	background: #fff;
	margin-top: 10px;
	border-radius: 10px;
	padding: 1vh 1vw;
}

.homeSHTxt {
	margin: 0;
	font-size: 1.5vw;
	font-weight: 700;
	color: rgba(42, 130, 228, 1);
}

.homeSH1 {
	display: flex;
	flex-wrap: wrap;
	padding: 0vw 0.2vh;
	padding-bottom: 0;
}

.homeSH2 {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	/* margin-right: 18px; */
	width: 3.8%;
	height: 5.5vh;
	font-size: 14px;
	cursor: pointer;
}

.homeSH1 .homeSH2:nth-child(27) {
	opacity: 0;
}

/* .homeSH1 .homeSH2:nth-child(26) span {
		opacity: 0;
	} */

.door1 {
	flex-direction: column-reverse;
}

.homeSH2 img {
	width: 26px;
}

/* 故障显示 */
.item>>>.el-badge__content {
	background: rgba(212, 48, 48, 1);
}

/* 状态显示 */
.item1>>>.el-badge__content {
	background: rgba(67, 207, 124, 1);
}

.homeSH1 .homeSH2:first-child img,
.homeSH1 .homeSH2:last-child img {
	width: 20px;
}

.homeSHM {
	display: flex;
	align-items: center;
	height: 19.7vh;
}

.homeTuStList {
	display: flex;
}

.homeTuStList1,
.homeTuStList2 {
	width: 10.3vw;
	height: 17vh;
	margin-right: 0.9vw;
	border-radius: 10px;
	border: 1px solid rgba(42, 130, 228, 1);
	position: relative;
}

.homeTuStList2 {
	width: 17.4vw;
	height: 17vh;
}

.homeTuStList11 {
	text-align: center;
	font-size: 16px;
	font-weight: 700;
	color: rgba(0, 65, 135, 1);
	margin: 0px auto;
}

.homeTuStList12 {
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
	align-items: center;
	height: 83%;

}

.homeTuStList2 .homeTuStList12 {
	display: flex;
	flex-direction: inherit;
	justify-content: flex-start;
	flex-wrap: wrap;
	padding: 10px;
}

.homeTuStList13 {
	background: rgba(166, 166, 166, 1);
	color: #fff;
	border-radius: 5px;
	padding: 0.2vw 0.7vh;
	font-size: 14px;
	margin-bottom: 0.3vh;
	cursor: pointer;
}

.PSLBtn {
	border: none;
}

.homeTuStList2 .homeTuStList13 {
	padding: 0.2vw 1vh;
	margin-bottom: 1.4vh;
	margin-right: 0.5vw;
	font-size: 14px;
	text-align: center;
	width: 48%;
}

.PSCWidth1 .homeTuStList13:nth-child(2n+1) {
	width: 53%;
}

.PSCWidth1 .homeTuStList13:nth-child(2n) {
	width: 43%;
}


.homeTuStList3 .homeTuStList13 {
	font-size: 14px;
	margin: auto;
}

.homeTuStList3 .homeTuStList12 {
	height: 78%;
}

.homeTuStList2 .homeTuStList13:nth-child(2n) {
	margin-right: 0 !important;
}

/* .homeTuStList2 .homeTuStList13:nth-child(5) {
		margin-right: 24px;
	} */

.IBPactive {
	background: rgba(67, 207, 124, 1) !important;
}

.homewarn {
	position: absolute;
	right: 0.5vw;
	top: 0.1vw;
	width: 1.25vw;
	height: 1.25vw;
	cursor: pointer;
}

.doorBaseInfo {
	width: 25.4vw;
	padding: 1.3vh 1.5vw;
	height: 20vh;
	border-radius: 10px;
	background: rgba(0, 0, 0, 0.6);
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-12.7vw, -2.5vh);
}

.doorBaseInfoH {
	display: flex;
	justify-content: center;
	font-size: 16px;
	font-weight: 400;
	color: rgba(255, 255, 255, 1);
}

.doorBaseInfoH div {
	width: 50%;
	display: flex;
	justify-content: flex-start;
}

.doorBaseInfoH1 {
	width: 7.25vw;
	display: block;
}

.doorBaseInfoH2 {
	width: 4.25vw;
	display: block;
}

.doorBaseInfoC {
	display: flex;
	font-size: 14px;
	font-weight: 400;
	margin-top: 1.6vh;
	color: rgba(255, 255, 255, 1);
}

.doorBaseInfoN1 {
	position: relative;
	padding-left: 2vw;
	margin-bottom: 0.4vh;
	height: 1.2vw;
	display: flex;
	align-items: center;
}

.doorBaseInfoN1:before {
	content: '';
	width: 1vw;
	height: 1vw;
	border-radius: 100px;
	background: rgba(229, 229, 229, 1);
	position: absolute;
	left: 0;
	top: 0px;
}

.doorBaseInfoNA:before {
	background: rgba(9, 216, 145, 1) !important;
}

.doorBaseInfoNB:before {
	background: rgba(212, 48, 48, 1) !important;
}

.doorBaseInfolf {
	width: 100%;
	display: flex;
	/* padding-right: 0.78vw; */
	height: 8.75vh;
	flex-direction: initial;
	flex-wrap: wrap;
	justify-content: space-between;
	/* border-right: 1px solid rgba(255, 255, 255, 1); */
}

.doorBaseInfolf .doorBaseInfoN1,
.doorBaseInfoRg .doorBaseInfoN1 {
	width: 50%;
}

.doorBaseInfoRg {
	/* padding-left: 0.9vw; */
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	height: 8.75vh;
	justify-content: space-between;
}

.opcity1 {
	opacity: 0 !important;
}

.PSLW {
	width: 20% !important;
}

.PSL12 {
	padding: 5px !important;
}

.PSLNew {
	padding: 0.2vw 2px !important;
	margin-right: 0.2vw !important;
	width: 49%;
}

.PSLNew2 {
	padding: 0.2vw 2px !important;
}

.PSLNew1 {
	padding: 0.2vw 0.4vh !important;
}

.PSLNew3 {
	padding: 0.2vw 2px !important;
	/* width: 60%; */
}

.PSLNew3:nth-child(2n+1) {
	width: 56%;
}

.PSLNew3:nth-child(2n) {
	width: 39%;
}

.PSLNew3:nth-child(5) {
	margin-right: 0.5vw !important;
}

.SIGWidth {
	width: 8.3vw !important;
}

.PSCWidth {
	width: 14.4vw !important;
	margin-right: 0px !important;
}

.PSCWidth1 {
	width: 15.4vw !important;
}

/* .doorBaseInfoRg .doorBaseInfoN1:nth-child(2n+1){
		margin-right: 1vw;
	} */
@media screen and (min-width:1920px) {
	.homeTuStList2 .homeTuStList13 {
		width: 47%;
		text-align: center;
	}

	.homeTuStList2 .homeTuStList13:nth-child(5) {
		margin-right: 0.5vw;
	}
}
</style>
